<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/book_expand"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        permission="ADMIN"
        show-select
        @selectChange="tableSelectChange"
        @reloadOptions="handleGetOptions"
      >
        <template slot="header_actions" slot-scope="scope">
          <el-button v-waves type="warning" class="filter-button" icon="el-icon-refresh" @click="putRight()">纠正</el-button>
          <el-popconfirm
            title="是否批量删除？"
            icon="el-icon-delete"
            icon-color="red"
            confirm-button-type="danger"
            @confirm="deleteAll()">
            <el-button slot="reference" v-waves type="danger" icon="el-icon-delete" style="margin-left: 10px">批量删除</el-button>
          </el-popconfirm>
        </template>
      </base-list>
    </div>
    <el-dialog title="新目标图书" :visible.sync="putRightVisible">
      <el-form :model="putRightData">
        <el-form-item label="新目标图书" prop="newBook">
          <remote-select-book ref="newBook_RemoteForm" :size="50" column-name="newBook" url="/book_info" label="name" class="form-item"
                         :value="putRightData.newBook" @columnValChange="columnValChange"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="addOrEditLoading" @click="putRightVisible = false">取 消</el-button>
        <el-button type="primary" :loading="addOrEditLoading" @click="handleGenerate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {requestBase} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'
import RemoteSelect from '@/components/RemoteSelect/index.vue';
import RemoteSelectBook from '@/components/RemoteSelectBook/index.vue'; // waves directive
import permission from '@/directive/permission'
import waves from '@/directive/waves'
export default {
  name: 'BookExpand',
  components: {RemoteSelect, RemoteSelectBook, BaseList},
  directives: { permission, waves },
  data() {
    return {
      columns: [
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'sourceBook', label: '源图书', tooltip: '源图书', type: 'REMOTE_SELECT_BOOK', remote: {multiple: false}, queryable: true},
        // {show: true, edit: true, width: 'auto',minWidth: '300', key: 'sourceBookSection', label: '源图书章节', tooltip: '源图书章节', type: 'REMOTE_SELECT', remote: {url: '/book_section', label: 'name', multiple: false}, queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'targetBook', label: '目标图书', tooltip: '目标图书', type: 'REMOTE_SELECT_BOOK', remote: {multiple: false}, queryable: true},

        {show: true, edit: true, width: '100', key: 'weight', label: '权重值', tooltip: '权重值', type: 'NUMBER', queryable: true, sortable: true},
        {show: true, edit: true, width: 'auto',minWidth: '300', key: 'recommend', label: '推荐语', tooltip: '推荐语', type: 'WORD', queryable: true, sortable: true},

        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createTime', label: '创建时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: false, width: 'auto',minWidth: '200', key: 'updateTime', label: '更新时间', tooltip: '更新时间', type: 'DATE_TIME', queryable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createUser', label: '创建人', tooltip: '创建人', type: 'WORD'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'updateUser', label: '修改人', tooltip: '修改人', type: 'WORD'},
      ],
      format: {
        sourceBook: (data, index) => {
          return data.sourceBook ? data.sourceBook.name + '('+data.sourceBook.id+')' : ''
        },
        sourceBookSection: (data, index) => {
          return data.sourceBookSection ? data.sourceBookSection.name : ''
        },
        targetBook: (data, index) => {
          return data.targetBook ? data.targetBook.name + '('+data.targetBook.id+')' : ''
        },
        createUser: (data, index) => {
          return data.createUser ? data.createUser.nickName + '('+data.createUser.id+')' : ''
        },
        updateUser: (data, index) => {
          return data.updateUser ? data.updateUser.nickName + '('+data.updateUser.id+')' : ''
        }
      },
      rules: {
        add: {
          sourceBook: [{required: true, message: '源图书必填!', trigger: 'change'}],
          targetBook: [{required: true, message: '目标图书必填!', trigger: 'change'}],

        },
        edit: {
          id: [{required: true, message: '请选择数据!', trigger: 'change'}],
          sourceBook: [{required: true, message: '源图书必填!', trigger: 'change'}],
          targetBook: [{required: true, message: '目标图书必填!', trigger: 'change'}],

        }
      },
      putRightRule: {
        oldBook: [{required: true, message: '请选择原目标图书!', trigger: 'change'}],
        newBook: [{required: true, message: '请选择新目标图书!', trigger: 'change'}],
      },
      putRightByIdRule: {
        oldBookId: [{required: true, message: '请输入原目标图书ID!', trigger: 'change'}],
        newBookId: [{required: true, message: '请输入新目标图书ID!', trigger: 'change'}],
      },
      options: {
      },
      putRightVisible: false,
      putRightData: {
        ids: [],
        newBook: {}
      },
      addOrEditLoading: false,
      multipleSelection: []
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    },
    columnValChange(val, index, column) {
      console.log(val, index, column);
      this.$set(this.putRightData, column, val)
    },
    tableSelectChange(val) {
      this.multipleSelection = val
    },
    putRight() {
      if (!this.multipleSelection) {
        this.$notify.error('请选择数据!')
        return
      }
      this.putRightData = {
        ids: this.multipleSelection.map(e => e.id),
        newBook: {}
      }
      this.putRightVisible = true
    },
    handleGenerate() {
      this.addOrEditLoading = true
      if (!this.putRightData.newBook) {
        this.$notify.error('请选择数据!')
        return
      }
      const tempC = {
        ids: this.putRightData.ids,
        newBookId: this.putRightData.newBook.id
      }
      requestBase({url: '/book_expand/put_right', data: tempC, method: 'POST'}).then(res => {
        this.$refs.table.fetchData()
        this.putRightVisible = false
        this.$notify.success('纠正完成!')
        this.addOrEditLoading = false
      }).catch(() => {
        this.addOrEditLoading = false
      })
    },
    deleteAll() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$notify.error('请选择数据!')
        return
      }
      const count = this.multipleSelection.length;
      let success_count = 0;
      this.multipleSelection.forEach(e => {
        requestBase({url: '/book_expand/' + e.id, method: 'DELETE'}).then(res => {
          success_count++;
          if (success_count === count) {
            this.$notify.success('删除成功!')
            this.$refs.table.fetchData()
            this.mergeLoading = false
          }
        })
      })
    },
    putRightById() {
      this.putRightDataById = {
        oldBookId: '',
        newBookId: '',
        recommend: ''
      }
      this.putRightByIdVisible = true
    },
    handleGenerateById() {
      this.addOrEditLoading = true
      this.$refs.putRightDataByIdForm.validate((valid) => {
        if (valid) {
          const tempC = {
            oldBookId: this.putRightDataById.oldBookId,
            newBookId: this.putRightDataById.newBookId,
            recommend: this.putRightDataById.recommend
          }
          requestBase({url: '/book_expand/put_right', data: tempC, method: 'POST'}).then(res => {
            this.$refs.table.fetchData()
            this.putRightByIdVisible = false
            this.$notify.success('纠正完成!')
            this.addOrEditLoading = false
          }).catch(() => {
            this.addOrEditLoading = false
          })
        } else {
          this.addOrEditLoading = false
        }
      })
    }
  }
}
</script>


